import React, { PureComponent } from 'react';
import { Card } from 'antd';
import { connect } from 'dva';
import UserComment from './userComment';
import CommentType from './commentType';
import PropTypes from 'prop-types';

const mapStateToProps = (state: any) => ({
  userComment: state.userComment
});
class UserCommentTab extends PureComponent<any, any> {
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.any
  };

  constructor(props: any) {
    super(props);
    this.state = {
      activeTabKey: sessionStorage.getItem('userCommentTab') || 'userComment',
      projectOptions: []
    };
  }

  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'userComment/getDataWithRes',
      payload: { url: '/basedata/findprojectbylogin' },
      callback: (data: any) => {
        if (data) {
          this.setState({
            projectOptions: data,
          });
        }
      },
    });
  }

  onTabChange = (key: any) => {
    sessionStorage.setItem('userCommentTab', key);
    this.setState({ activeTabKey: key });
  };

  render() {
    const {
      location: { pathname = '/' },
    } = this.props;
    const { activeTabKey } = this.state;
    const tabList = [
      {
        key: 'userComment',
        tab: '吐槽管理',
      },
      {
        key: 'commentType',
        tab: '类型管理',
      }
    ];
    const contentList = {
      userComment: <UserComment pathname={pathname} permissions={this.context.permissions} projectOptions={this.state.projectOptions} dicData={this.context.dicData} />,
      commentType: <CommentType pathname={pathname} permissions={this.context.permissions} projectOptions={this.state.projectOptions} dicData={this.context.dicData} />
    };
    return (
      <Card
        size="small"
        bordered={false}
        style={{ backgroundColor: 'rgba(255,255,255,0)' }}
        headStyle={{ backgroundColor: 'rgba(255,255,255)' }}
        bodyStyle={{ padding: '1px 0 0 0' }}
        tabList={tabList}
        activeTabKey={activeTabKey}
        onTabChange={this.onTabChange}
      >
        {contentList[activeTabKey]}
      </Card>
    );
  }
}
export default connect(mapStateToProps)(UserCommentTab);
